import { Bar, BarChart, Label as RechartsLabel, ResponsiveContainer, XAxis, YAxis } from 'recharts'
import Label from '../Label'
import { tick1 } from './Section2'

const data = [
  { name: '23-10', v1: 18, v2: 4 },
  { name: '23-11', v1: 20, v2: 24 },
  { name: '23-12', v1: 20, v2: 36 },
  { name: '24-01', v1: 60, v2: 76 },
  { name: '24-02', v1: 100, v2: 79 },
  { name: '24-03', v1: 80, v2: 60 },
]
export default function Section8(props: React.HTMLAttributes<HTMLElement>) {
  return (
    <Label {...props} title="全市绿色有机农业基础认证面积" divider>
      <ResponsiveContainer>
        <BarChart data={data} barSize={8} margin={{ left: 4, bottom: 30, right: 8 }}>
          <Bar dataKey="v1" fill="#2E89CF"></Bar>
          <Bar dataKey="v2" fill="#61C98C"></Bar>
          <XAxis dataKey="name" tick={tick1} />
          <YAxis tick={tick1} padding={{ top: 30 }}>
            <RechartsLabel position="insideTop">单位:万亩</RechartsLabel>
          </YAxis>
        </BarChart>
      </ResponsiveContainer>
    </Label>
  )
}
